<template>
	<view>
		<loading
			ref="loading"
			:custom="false"
			:type="1">
		</loading>
		<view class="fixed">
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm  flex justify-between">
				<view class="font-sub-title">
					<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
					我的血氧
				</view>
				<picker mode="date" :value="date" @change="bindDateChange">
					<text class="font-sub-title cuIcon-calendar"></text>
				</picker>
			</view>
		</view>
		<bloodoxygenchart :title="date==now?'今日血氧':date" :style="{marginTop:navHeight}" :categories="categories" :series="series"></bloodoxygenchart>
		<view class="padding text-center" v-if="arrayList.length!=0">
			<view class="flex align-center justify-between text-center margin-top-sm">
				<view class="flex-sub right-border text-blue">
					<view class="font-small">最高血氧</view>
					<view class="font-small">
						<view class="cu-avatar sm round margin-right-xs bgpoint" style="background-color:#e39311"></view>{{statistic[0]}}%
					</view>
				</view>
				<view class="flex-sub right-border text-orange">
					<view class="font-small">最低血氧</view>
					<view class="font-small">
						<view class="cu-avatar sm round margin-right-xs bgpoint" style="background-color:#427EE3"></view>{{statistic[1]}}%
					</view>
				</view>
				<view class="flex-sub text-purple">
					<view class="font-small">平均血氧</view>
					<view class="font-small"><view class="cu-avatar sm round margin-right-xs bgpoint" style="background-color:#afc9f5"></view>{{Math.round(statistic[2])}}%</view>
				</view>
			</view>
		</view>
		<view v-if="arrayList.length!=0" class="cu-list menu sm-border" >
			<view class="cu-item" v-for="data in arrayList">
				<view class="content">
					<text class="margin-right font-normal">{{data.oovalue}}%</text>
				</view>
				<text style="margin-right: 90rpx;" :class="getStand(data.oovalue)=='正常'?'text-green font-small':'text-red font-small'">{{getStand(data.oovalue)}}</text>
				<view class="action">
					<text class=" font-small">{{data.terminalTime.substring(0,16)}}</text>
		
				</view>
			</view>
		</view>
		<view v-else class="no_data">
			<image src="../../static/img/no_data.png" class="no_data_img" mode="widthFix"></image>
			<view class="font-sub-title">暂无数据</view>
		</view>
	</view>
</template>

<script>
	import bloodoxygenchart from '@/pages/health/bloodoxygenchart/index.vue'
	import Vue from 'vue'
	import {formatDateDay} from '@/utils/datetime.js'
	import {bloodoxygenStandard,getStatistic} from '@/utils/standard.js'
	import {
		mapGetters
	} from 'vuex'
	var that;
	export default {
		components: {
			bloodoxygenchart
		},
		computed:{
			...mapGetters(['navHeight']),
		},
		data() {
			return {
				arrayList:[],
				categories:[],
				series:[],
				statusBarHeight:Vue.prototype.StatusBar,
				date:'',
				statistic:[]
			}
		},
		onLoad() {
			that = this;
			this.date = formatDateDay(new Date())
			this.now = formatDateDay(new Date())
			this.getData(this.date )
		},
		mounted() {
			this.open();
		},
		methods: {
			bindDateChange: function(e) {
				that.open()
				this.arrayList = []
				this.statistic = []
				this.categories = []
				this.series = []
				this.date = e.target.value
				this.getData(this.date)
			},
			getData(date){
				this.$http.getAll(
				{
					startTime:date,
					endTime:date,
					"sort":"2"
				}).then((res) => {
					var data = res.content
					that.arrayList = data
					that.series=[
						{
							"name":"血氧",
							"data":[]
						}
					]
					if (data.length!=0) {
						var arr = []
						for(var i=0;i<data.length;i++){
							that.categories.push(data[i].terminalTime.substring(11,19))
							that.series[0].data.push(data[i].oovalue);
							arr.push(data[i].oovalue)
						}
						that.statistic = getStatistic(arr)
					}
					setTimeout(function(){
						that.close();
					},1000)
				})
			},
			back(){
				uni.navigateBack();
			},
			close:function(){
				this.$refs.loading.close();
			},
			open:function(){
				this.$refs.loading.open();
			},
			getStand(value){
				return bloodoxygenStandard(value)
			}
		}
	}
</script>

<style>
	.cu-item{
		height: 108rpx;
	}
	.bgpoint {
		width: 20rpx!important;
		height: 20rpx!important;
	}
</style>
